<template>
    <el-dialog v-model="dialogState" :close-on-click-modal="false" width="500px" title="短信验证" :z-index="9">
        <el-form :model="form" ref="ruleFormRef" :inline="true" label-width="70px">
            <el-form-item label="手机号" prop="phone" style="width: 100%;">
                <el-input v-model="form.phone" disabled placeholder="请输入手机号" style="width: 100%;"></el-input>
            </el-form-item>
            <el-form-item label="验证码" prop="code" style="width: 100%">
                <el-input v-model="form.code" placeholder="请输入验证码" style="flex: 1; margin-right: 5px;" />
                <CountDownBtn :phone="form.phone" :type="6" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-foot">
                <el-button @click="dialogState = false">取消</el-button>
                <el-button type="primary" :loading="loading" @click="handleVerify">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script lang="ts" setup>
import { ref, reactive, computed, onMounted } from 'vue'
import CountDownBtn from './CountDownBtn.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useUserStore } from '@/store/user'

const props = defineProps({
    modelValue: Boolean,
    loading: Boolean
})
const userStore = useUserStore()
const form = reactive({
    phone: userStore.userInfo.mobile,
    code: ''
})


const emit = defineEmits(['update:modelValue', 'submit-success'])

// 核心：使用计算属性替代watch
const dialogState = computed({
    get: () => props.modelValue,
    set: (val) => emit('update:modelValue', val)
})

const handleVerify = () => {
    if (!form.code) {
        ElMessage.error('请输入验证码')
        return
    }
    emit('submit-success', form)
}
</script>
<style lang="scss" scoped></style>